<template>
  <div>
    <!--    查询表单-->
    <el-form :inline="true" :model="selectOwner" class="demo-form-inline">
      <el-form-item label="昵称">
        <el-input v-model="selectOwner.ownerNickName" placeholder="昵称"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名">
        <el-input v-model="selectOwner.ownerRealName" placeholder="真实姓名"></el-input>
      </el-form-item>
      <el-form-item label="身份证号">
        <el-input v-model="selectOwner.ownerIdCard" placeholder="身份证号"></el-input>
      </el-form-item>
      <el-form-item label="手机号码">
        <el-input v-model="selectOwner.ownerPhoneNumber" placeholder="手机号码"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
    <!--    表格数据-->
    <el-button type="warning"  @click="outExe">导出</el-button>
    <el-table
        :data="ownerPage"
        style="width: 100%;height: 100%"
        id="enableExportExcel"
    >
      <el-table-column
          fixed
          prop="ownerNickname"
          label="昵称"
          width="150">
      </el-table-column>
      <el-table-column
          prop="ownerRealName"
          label="真实姓名"
          width="120">
      </el-table-column>
      <el-table-column
          prop="ownerGender"
          label="性别"
          width="120">
        <template slot-scope="scope" v-if="scope.row.ownerGender=='Male'">男</template>
      </el-table-column>
      <el-table-column
          prop="ownerAge"
          label="年龄"
          width="120">
      </el-table-column>
      <el-table-column
          prop="ownerPhoneNumber"
          label="手机号码"
          width="120">
      </el-table-column>
      <el-table-column
          prop="communityName"
          label="小区名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="buildingName"
          label="楼栋名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="unitName"
          label="单元名称"
          width="120">
      </el-table-column>
      <el-table-column
          prop="roomName"
          label="房间名称"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="120">
        <template slot-scope="scope">
          <el-button
              @click.native.prevent="unBind(scope.row)"
              type="text"
              size="small">
            解绑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页组件-->
    <div class="block">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="current"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import FileSaver from "file-saver";
import * as XLSX from "xlsx";
export default {
  methods: {
    // todo 解绑待做
    unBind(row) {
     this.axios.delete("/delete/"+row.ownerRoomId)
         .then(result=>{
           this.loadOwnerPage()
         })
    },
    //加载分页数据
    loadOwnerPage() {
      this.axios.get("/owner/page?current=" + this.current + "&size=" + this.size)
          .then(result => {
            this.ownerPage = result.data.data.records
            this.total = result.data.data.total
          })
    },
    onSubmit() {
      this.axios.get("/owner/page?"
          + "current" + this.current
          + "&size=" + this.size
          + "&ownerNiceName=" + this.selectOwner.ownerNickName
          + "&ownerRealName=" + this.selectOwner.ownerRealName
          + "&ownerIdCard=" + this.selectOwner.ownerIdCard
          + "&ownerPhoneNumber" + this.selectOwner.ownerPhoneNumber)
          .then(result => {
            this.ownerPage = result.data.data.records
            this.total = result.data.data.total
          })
    },
    //分页组件函数
    handleSizeChange(val) {
      this.size = val
      this.loadOwnerPage()
    },
    //分页组件函数
    handleCurrentChange(val) {
      this.current = val
      this.loadOwnerPage()
    },
    //   导出表格数据为Excel
    //导出excel表格
    outExe() {
      this.$confirm("此操作将导出excel文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
          .then(() => {
            this.excelData = this.deptList; //你要导出的数据list。
            this.exportExcel();
          })
          .catch(() => {
          });
    },
    exportExcel() {
      //转换成excel时，使用原始的格式
      var xlsxParam = {raw: true};
      let fix = document.querySelector(".el-table__fixed");
      let wb;
      //判断有无fixed定位，如果有的话去掉，后面再加上，不然数据会重复
      if (fix) {
        wb = XLSX.utils.table_to_book(
            document.querySelector("#enableExportExcel").removeChild(fix), xlsxParam);
        document.querySelector("#enableExportExcel").appendChild(fix);
      } else {
        wb = XLSX.utils.table_to_book(document.querySelector("#enableExportExcel"), xlsxParam);
      }
      var wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(new Blob([wbout], {type: "application/octet-stream"}), "导出详情单.xlsx");
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },
  },
  mounted() {
    this.loadOwnerPage()
  },
  data() {
    return {
      //当前第几页
      current: 1,
      //一页有行数据
      size: 5,
      //数据总条数
      total: 0,
      //分页数据
      ownerPage: null,
      //查询数据
      selectOwner: {
        //昵称
        ownerNickName: "",
        //真实姓名
        ownerRealName: "",
        //身份证号
        ownerIdCard: "",
        //手机号
        ownerPhoneNumber: "",
        //业主详细信息
        owner:{
          //业主id
          ownerId:'',
          //昵称
          ownerNickName: "",
          //真实姓名
          ownerRealName: "",
          //业主性别  性别unknow未知male男female女
          ownerGender:"",
          //业主年龄
          ownerAge:"",
          //业主身份证号
          ownerIdCard:"",
          //业主电话号码
          ownerPhoneNumber: "",
          //业主openId
          ownerOpenId:"",
          //业主微信号
          ownerWechatId:"",
          //业主QQ号码
          ownerQqNumber:"",
          //业主生日
          ownerBirthday:"",
          //业主头像
          ownerPortrait:"",
          //个性签名
          ownerSignature:"",
          //禁用状态
          ownerStatus:"",
          //注册方式  weChat微信-app-web）
          ownerLogonMode:"",
          //业主类型
          ownerType:"",
          //业主密码
          ownerPassword:"",
          //创建者
          createBy:"",
          //创建时间
          createTime:"",
          //更新者
          updateBy:"",
          //更新时间
          updateTime:"",
          //备注
          remark:""
        }
      }
    }
  },

}
</script>
